<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HzSparrowAI - 智能问答系统</title>
    <link rel="stylesheet" href="css/index-font.css">
    <link rel="stylesheet" href="assets/icons/bootstrap-icons.css">
    
    <!-- 拆分后的CSS文件 -->
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/layout.css">
    <link rel="stylesheet" href="css/chat.css">
    <link rel="stylesheet" href="css/knowledge.css">
    <link rel="stylesheet" href="css/documents.css">
    <link rel="stylesheet" href="css/components.css">
    <link rel="stylesheet" href="css/responsive.css">
    <link rel="stylesheet" href="css/settings.css">
    
    <!-- 其他特定功能的CSS -->
    <link rel="stylesheet" href="css/document-detail.css">
    <link rel="stylesheet" href="css/document-form.css">
</head>
<body>
    <!-- 主容器 -->
    <div class="app-container">
        <!-- 侧边栏容器 -->
        <div id="sidebar-container">
            <!-- 侧边栏模块将动态加载到这里 -->
        </div>
        
        <!-- 主内容区域 -->
        <div class="main-content">
            <!-- 顶部导航容器 -->
            <div id="top-nav-container">
                <!-- 顶部导航模块将动态加载到这里 -->
            </div>
            
            <!-- 聊天内容容器 -->
            <div id="chat-container">
                <!-- 聊天模块将动态加载到这里 -->
            </div>
            
            <!-- 知识库内容容器 -->
            <div id="knowledge-container">
                <!-- 知识库模块将动态加载到这里 -->
            </div>
            
            <!-- 文档管理容器 -->
            <div id="documents-container">
                <!-- 文档管理模块将动态加载到这里 -->
            </div>
            
            <!-- 文档内容容器 -->
            <div id="doc-content-container">
                <!-- 文档内容模块将动态加载到这里 -->
            </div>
            
            <!-- 添加文档容器 -->
            <div id="add-document-container">
                <!-- 添加文档模块将动态加载到这里 -->
            </div>
            
            <!-- 设置容器 -->
            <div id="settings-container">
                <!-- 设置模块将动态加载到这里 -->
            </div>
        </div>
    </div>
    
    <!-- 弹窗容器 -->
    <div id="modals-container">
        <!-- 弹窗模块将动态加载到这里 -->
    </div>

    <!-- 加载中提示 -->
    <div id="loading-overlay" style="
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.9);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
    ">
        <div style="text-align: center;">
            <div style="
                width: 40px;
                height: 40px;
                border: 4px solid #f3f3f3;
                border-top: 4px solid #3498db;
                border-radius: 50%;
                animation: spin 1s linear infinite;
                margin: 0 auto 15px;
            "></div>
            <p>正在加载模块...</p>
        </div>
    </div>

    <style>
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>

    <!-- 依赖脚本 -->
    <script src="js/marked.min.js"></script>
    
    <!-- 模块加载器 - 必须最先加载 -->
    <script src="js/module-loader.js"></script>
    
    <!-- 应用程序脚本 -->
    <script src="js/knowledge-base.js"></script>
    <script src="js/document-detail.js"></script>
    <script src="js/document-form.js"></script>
    <script src="js/settings.js"></script>
    <script src="js/index-main.js"></script>

    <script>
        // 监听模块加载完成事件
        document.addEventListener('modulesLoaded', function() {
            // 隐藏加载提示
            const loadingOverlay = document.getElementById('loading-overlay');
            if (loadingOverlay) {
                loadingOverlay.style.display = 'none';
            }
            
            // 初始化应用程序
            if (typeof initializeAppAfterModulesLoaded === 'function') {
                initializeAppAfterModulesLoaded();
            }
        });

        // 如果模块加载失败，显示错误信息
        window.addEventListener('error', function(event) {
            if (event.filename && event.filename.includes('modules/')) {
                console.error('Module loading failed:', event);
                const loadingOverlay = document.getElementById('loading-overlay');
                if (loadingOverlay) {
                    loadingOverlay.innerHTML = `
                        <div style="text-align: center; color: #f44336;">
                            <div style="font-size: 48px; margin-bottom: 15px;">⚠️</div>
                            <p>模块加载失败</p>
                            <button onclick="location.reload()" style="
                                padding: 10px 20px;
                                background: #3498db;
                                color: white;
                                border: none;
                                border-radius: 5px;
                                cursor: pointer;
                                margin-top: 10px;
                            ">刷新页面</button>
                        </div>
                    `;
                }
            }
        });
    </script>
</body>
</html>